<template>
  <!-- 树状列表组件 -->
  <div class="treeModule">
    <div class="common-search-item">
      <div class="label">设备名称:</div>
      <div class="input">
        <el-input v-model="equipmentName" clearable @change="queryDeviceManagement" />
      </div>
    </div>
    <ul class="pond-list">
      <li class="pond-item" :class="{ active: btnActiveClass == item.equipmentId }" @click="selectPond(item)"
        v-for="(item, index) in equipmentlist" :key="index + 'pond'">
        <span>{{ item.equipmentName }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import DeviceManagementApi from "@/api/basic-info-manage/device-management";
export default {
  props: {
  },
  data() {
    return {
      equipmentlist: [],
      equipmentName: '',
      btnActiveClass: 0,
    }
  },
  mounted() {
    this.queryDeviceManagement()
  },
  methods: {
    // 查询设备
    queryDeviceManagement(e) {
      let params = {}
      if (e) {
        params.equipmentName = e
      }
      DeviceManagementApi.queryByCondition(params).then(res => {
        this.equipmentlist = res.data;
        this.selectPond(this.equipmentlist[0])
      })
    },
    selectPond(item) {
      this.$emit("treeselectvalue", item.equipmentId)
      this.btnActiveClass = item.equipmentId;
    }
  }
}
</script>
<style lang="scss" scoped>
.common-search-item{
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  .label{
    padding: 0 10px;
    color: #333333;
  }
}
.treeModule {
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
  overflow: auto;
}

.pond-list {
  width: 100%;
  overflow: auto;
  list-style-type: none;
  padding-inline-start: 0;



  .pond-item {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    height: 28px;
    line-height: 28px;
    background-color: transparent;
    color: rgb(10, 114, 211);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
      width: 100%;
      border: 1px solid #c0c0c0;
    }

    span {
      font-size: 14px;
    }
  }

  .active {
    background-color: #4b8bc9;
    color: #ffffff
  }
}
</style>
